<!-- 失物招领 -->
<template>
  <div class="lostFound">
    <myheader :title="titles" rightBtn="主页" @updataInfo="submitRecruit"></myheader>

    <div class="lostFound_Ul_li_lostFound">
      <van-swipe lazy-render>
        <van-swipe-item
          style="height:200px;"
          v-for="(items,indexs)  in   lostFound.imgList "
          :key="indexs"
          @click.stop="bigImg(index,indexs)"
          fit="contain"
        >
          <van-image :src="items" class="swip_img">
            <template v-slot:loading>
              <van-loading size="20px" vertical>加载中...</van-loading>
            </template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-row v-if="lostFound.imgList">
      <p
        style="font-size:0.5rem; text-indent: 2em; padding:16px; text-align: center;"
        class="overflowMore"
      >描述：{{ lostFound.content }}</p>
      <p
        style="font-size:0.5rem; text-indent: 2em; padding:16px;"
        class="overflowMore"
      >遗失时间:{{ formatDateTime(lostFound.lostTime) }}</p>
    </van-row>
    <van-divider
      dashed
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >联系人信息</van-divider>
    <van-contact-card
      v-if="lostFound.imgList"
      type="edit"
      :name="name"
      :tel="phone"
      :editable="false"
    />
  </div>
</template>

<script>
import formatDateTime from '../../../utils/data'
import myheader from '../../../comon/myheader.vue'
import { ImagePreview } from 'vant'
export default {
  components: {
    myheader,
  },

  data() {
    return {
      lostFound: [],
      title: '',
      name: '',
      phone: '',
      show: false,
      index: 0,
    }
  },
  created() {
    this.init()
  },

  computed: {
    titles() {
      return '物品名称:' + this.title
    },
  },

  methods: {
    onChange(index) {
      this.show != this.show
    },
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },
    async init() {
      const res = await this.$axios.get(
        '/item/lost/info/' + this.$route.params.id
      )
      if (res.data.code == 200) {
        this.lostFound = res.data.data
        this.name = res.data.data.user.username
        this.phone = res.data.data.user.phone
        this.title = this.lostFound.title
        console.log(this.lostFound)
      }
    },
    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.lostFound.imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
    submitRecruit() {
      this.$router.push('/home')
    },
  },
}
</script>

<style scoped>
.lostFound {
  margin-top: 46px;
}
.van-image {
  width: 90% !important;
}
.van-cell {
  font-size: 17px !important;
}
</style>
